import { Fragment, useState, } from "react"
import "./index.scss"
import Scrollbar from "../../component/Scrollbar"
import { newList } from "../../utils/news_config"
export default function News() {


    const [lightItem, updateLightItem] = useState(1)

    const scrollbarData = [
        {
            id: 1,
            title: "NBA",
        },
        {
            id: 2,
            title: "社区",
        },
        {
            id: 3,
            title: "资讯",
        },
        {
            id: 4,
            title: "步行街",
        },
        {
            id: 5,
            title: "电竞",
        },
        {
            id: 6,
            title: "国际足球",
        },
        {
            id: 7,
            title: "中国足球",
        },
        {
            id: 8,
            title: "CBA",
        },
        {
            id: 9,
            title: "直播",
        },
        {
            id: 10,
            title: "空间",
        },
    ]

    const handleScrollClick = (id) => {
        updateLightItem(id)
    }

    return (
        <Fragment>
            <div className="news">
                <Scrollbar scrollbarData={scrollbarData} lightItem={lightItem} handleScrollClick={handleScrollClick} />
                <ul>
                    {newList.map(item => {
                        return <li key={item.tid} >
                            <a href={"/newsDetail/" + item.tid}>{item.title}</a>
                            </li>
                    })}
                </ul>
            </div>
        </Fragment>
    )
}